<template>
  <view class="feedbackInfo page-wrap wrap-column">
    <view class="wrap-content main-imfo">
      <view v-if="pageType=='info'&&feedbackInfo.status" class="info-model">
        <view class="model-title ">状态：
          <text class="model-status">{{ feedbackInfo.status== 10?'已接收' : '已回复' }}</text>
        </view>
        <view class="model-content">
          <view class="info-line">
            <text class="info-label">反馈编号：</text>{{ feedbackInfo.feedbackId }}
          </view>
          <view class="info-line">
            <text class="info-label">反馈时间：</text>{{ feedbackInfo.createTime !='1000-01-01 00:00:00'?feedbackInfo.createTime:'' }}
          </view>
          <view class="info-line">
            <text class="info-label">反馈类型：</text>{{ enumeratFn.getEnumerationName('freebackType',feedbackInfo.freebackType) }}
          </view>
          <view class="info-line">
            <text class="info-label">问题类型：</text>{{ enumeratFn.getEnumerationName('questionType',feedbackInfo.questionType) }}
          </view>
          <view v-if="feedbackInfo.status== 20" class="info-line ">
            <text class="info-label">客服回复内容</text>
            <view class="replyTime ">
              <text class="info-label">回复时间： </text>
              {{ feedbackInfo.replyTime !='1000-01-01 00:00:00'?feedbackInfo.replyTime:'' }}
            </view>
          </view>
          <view v-if="feedbackInfo.status== 20" class="textarea-line">{{ feedbackInfo.replyDetail }}</view>

        </view>
      </view>
      <view v-else>
        <view class="info-model">
          <view class="model-title  fw ">尊敬的会员：</view>
          <view v-if="feedbackInfo.freebackType=='10'" class="model-content info-tip">
            我们将充分分析您的意见作为平台建设的指导，另意见/建议反馈被采纳后平台会给予一定实物或电子券激励。
          </view>
          <view v-else class="model-content info-tip ">
            您的满意是我们公司永远追求的目标，我们会尽最大的努力积极改善。
          </view>
        </view>
        <view class="info-model">
          <view class="model-title fw">反馈类型<text>（必选）</text></view>
          <view class="model-content page-wrap wrap-between feedbackType">
            <view
              v-for="item in enumeratFn.getEnumerationList('freebackType')"
              :key="item.code"
              class="wrap-content type-item"
              :class="item.code==feedbackInfo.freebackType?'activity':''"
              @click="selectFreeback(item)"
            >{{ item.name }}</view>
          </view>
        </view>
        <view class="info-model">
          <view v-if="feedbackInfo.freebackType=='10'" class="model-title fw">建议类型<text>（必选）</text></view>
          <view v-else class="model-title fw">投诉类型<text>（必选）</text></view>
          <view class="model-content questionType">
            <view
              v-for="(item,index) in enumeratFn.getEnumerationList('questionType')"
              v-if="feedbackInfo.freebackType=='10'&&index<=4||feedbackInfo.freebackType=='20'&&index>4"
              :key="item.code"
              class="wrap-content question-item"
              :class="item.code==feedbackInfo.questionType?'activity':''"
              @click="selectquestionType(item)"
            >{{ item.name }}</view>
          </view>
        </view>
      </view>

      <view class="info-model">
        <view v-if="pageType!='info'" class="model-title fw">文字说明（必填）</view>
        <view v-else class="model-title fw">详细说明</view>

        <view v-if="pageType=='info'" class="model-content ">
          <view class="textarea-line">{{ feedbackInfo.wordsDetail }}</view>
        </view>
        <view v-else class="model-content wordsDetail">
          <textarea
            v-model="feedbackInfo.wordsDetail"
            placeholder="请填写文字说明"
            placeholder-class="place"
            maxlength="500"
            :show-count="false"
            :enableNative="false"
            :fixed="true"
            :adjust-position="false"
            @input="(v)=>{onchange(v,'wordsDetail')}"
            @blur="(v)=>{onchange(v,'wordsDetail')}"
          />
          <text>{{ feedbackInfo.wordsDetail? feedbackInfo.wordsDetail.length :0 }}/500</text>
        </view>
      </view>
      <view v-if="pageType!='info'||feedbackInfo.list.length>0" class="info-model">
        <view class="model-title fw">图片说明<text v-if="pageType!='info'">（最多3张图片，选填）</text></view>
        <view class="model-content">
          <view v-if="pageType!='info'" class="cell-pic-input">
            <u-upload
              :file-list="feedbackInfo.list"
              name="3"
              :preview-full-image="true"
              multiple
              :max-count="3"
              @afterRead="fileRead"
              @delete="fileDeletePic"
            >
              <view class="cell-img-add " >
                  <image class="image " :src="vuex_imgPath+'/add.png'" /></view>
            </u-upload>

          </view>
          <view v-else class="cell-pic-input">
            <image
              v-for="(file,index) in feedbackInfo.list"
              :key="index"
              class="cell-img"
              :src="file.picUrl"
            />
          </view>
        </view>
      </view>
      <view v-if="pageType=='info'" class="info-model">
        <view class="model-title fw">联系信息</view>
        <view class="model-content userInfo">
          <view v-if="feedbackInfo.freebackType == '20'" class="input-line"> {{ feedbackInfo.respondent }}</view>
          <view v-if="feedbackInfo.freebackType == '20'" class="input-line companyName">{{ feedbackInfo.companyName }}</view>
          <view class="input-line">{{ feedbackInfo.userName }}</view>
          <view class="input-line"> {{ feedbackInfo.mobilePhone }}</view>
        </view>
      </view>
      <view v-else class="info-model">
        <view class="model-title fw">请留下您的信息以便我们及时反馈（必填）</view>
        <view class="model-content userInfo">
          <view v-if="feedbackInfo.freebackType == '20'" class="input-line">
            <input v-model="feedbackInfo.respondent" class="uni-input" placeholder-style="color:#AAAAAA" maxlength="10" placeholder="请输入被投诉人" @blur="(v)=>{onchange(v,'respondent')}">
          </view>
          <view v-if="feedbackInfo.freebackType == '20'" class="input-line">
            <input v-model="feedbackInfo.companyName" class="uni-input" placeholder-style="color:#AAAAAA" maxlength="50" placeholder="请输入单位名称" @blur="(v)=>{onchange(v,'companyName')}">
          </view>
          <view class="input-line">
            <input v-model="feedbackInfo.userName" class="uni-input" placeholder-style="color:#AAAAAA" maxlength="10" placeholder="请输入您的称呼" @blur="(v)=>{onchange(v,'userName')}">
          </view>
          <view class="input-line">
            <input v-model="feedbackInfo.mobilePhone" class="uni-input" placeholder-style="color:#AAAAAA" maxlength="11" type="tel" placeholder="请输入您的手机号">
          </view>
        </view>
      </view>
    </view>
    <view v-if="pageType!='info'" class="btn-box">
      <button class="btn confirm-btn" :plain="true" @click="confirmFn">提交反馈意见</button>
    </view>
  </view>
</template>

<script>
import { searchFreeBackMsg, addFreeBackMsg } from '@/api/yc_userInfo';
import { enumeratFn } from '@/common/enumeratCommon';
export default {
  name: 'FeedbackInfo',
  data() {
    return {
      enumeratFn,
      feedbackInfo: {
        wordsDetail: '', //文字说明
        userName: '', //姓名
        mobilePhone: '', //手机
        respondent: '', //被投诉人
        companyName: '', //单位名称
        list: [],
        shoppingType: 20, //10为分销,20为非分销
        freebackType: '10',
        questionType: ''
      },
      pageType: 'info',
      isUpload: false,
    }
  },
  onLoad(options) {
    if (options.status && options.status != '0') {
      this.getFeedbackInfo(options.id)
    } else {
      this.pageType = 'add'
      this.feedbackInfo.mobilePhone = this.vuex_accountInfo.mobilePhone
    }
  },
  methods: {
    selectquestionType(typeItem) {
      if (this.pageType == 'info') {
        return
      }
      this.feedbackInfo.questionType = typeItem.code
    },
    selectFreeback(freebackItem) {
      if (this.pageType == 'info') {
        return
      }
      this.feedbackInfo.freebackType = freebackItem.code
      this.feedbackInfo.questionType = ''
    },
    // 图片
    async fileRead(event) {
      this.isUpload = true
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      const lists = [].concat(event.file)
      let fileListLen = this.feedbackInfo.list.length
      lists.map((item) => {
        this.feedbackInfo.list.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        await this.uploadFilePromise(lists[i].url).then((res) => {
          const item = this.feedbackInfo.list[fileListLen]
          this.feedbackInfo.list.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: res,
            picUrl: res
          }))
        })
        fileListLen++
      }
      this.isUpload = false
    },
    uploadFilePromise(url) {
      var urlpath = `${this.vuex_baseURL.ycMainUrl}/api/mobile/baseservice/uploadForIE8`
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: urlpath,
          filePath: url,
          fileType: 'image', //支付宝小程序必填
          name: 'file',
          formData: {},
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data)[0].fullPath)
            }, 1000)
          }
        });
      })
    },
    // 删除图片
    fileDeletePic(event) {
      this.companyPicPath = '';
      this.feedbackInfo.list.splice(event.index, 1)
      if (this.feedbackInfo.list.filter(file => file.status != 'success').length == 0) {
        this.isUpload = false
      }
    },
    onchange(v, key) {
      if (v.detail.value) {
        if (key == 'respondent' || key == 'userName') {
          v.detail.value = v.detail.value.replace(/[\d]/ig, '').slice(0, 10)
        }
        // 过滤表情包
        var regStr = /^(\s+)|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030|[\uD800-\uDBFF][\uDC00-\uDFFF]|[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/ig
        v.detail.value = v.detail.value.replace(regStr, '').slice(0, 500)
        this.feedbackInfo[key] = v.detail.value
      } else {
        this.feedbackInfo[key] = ''
      }
    },
    confirmFn() {
      if (this.isUpload || this.feedbackInfo.list.some(file => !file.picUrl)) {
        this.$u.toast('图片上传中，请稍后')
        return
      }
      // 必填校验
      if (!this.feedbackInfo.questionType) {
        this.$u.toast('请选择' + (this.feedbackInfo.freebackType == '10' ? '建议类型' : '投诉类型'))
        return
      }
      if (!this.feedbackInfo.wordsDetail) {
        this.$u.toast('请填写文字说明')
        return
      }
      if (this.feedbackInfo.freebackType == '20') {
        if (!this.feedbackInfo.respondent) {
          this.$u.toast('请填写被投诉人')
          return
        }
        if (!this.feedbackInfo.companyName) {
          this.$u.toast('请填写单位名称')
          return
        }
      } else {
        this.feedbackInfo.respondent = ''
        this.feedbackInfo.companyName = ''
      }

      if (!this.feedbackInfo.userName) {
        this.$u.toast('请填写联系信息')
        return
      }
      var pattern = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。]/im;
      if (pattern.test(this.feedbackInfo.userName)) {
        this.$u.toast('称呼不能包含特殊字符');
      }
      if (!this.feedbackInfo.mobilePhone) {
        this.$u.toast('请填写手机号')
        return
      }
      var phoneChar = /^1[3|4|5|6|7|8|9][0|1|2|3|4|5|6|7|8|9]\d{8}$/;//手机号码
      if (!phoneChar.test(this.feedbackInfo.mobilePhone)) {
        this.$u.toast('手机号格式不正确请修改')
        return
      }
      this.feedbackInfo.accountType = this.vuex_memberInfo.accountType
      addFreeBackMsg(this.feedbackInfo).then(res => {
        if (res.errorCode != 0) {
          this.$u.toast(res.msg)
          return
        }
        uni.redirectTo({
          url: '/customerFeedbackBox/customerFeedback/feedbackSuccess'
        })
      })
    },
    getFeedbackInfo(id) {
      var params = {
        id: id,
        // accountType:this.vuex_memberInfo.accountType
      }
      searchFreeBackMsg(params).then(res => {
        if (res.errorCode != 0) {
          this.$u.toast(res.msg)
          return
        }
        this.feedbackInfo = res.data
        if (!Array.isArray(this.feedbackInfo.list)) {
          this.feedbackInfo.list = []
        } else {
          this.feedbackInfo.list = this.feedbackInfo.list.filter(file => {
            if (file.picUrl) {
              file.url = file.picUrl
              return file
            }
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.feedbackInfo{
  font-size: 28rpx;
  color: #222222;
  margin: 16rpx 0 0;
  padding:0 32rpx;
  position: relative;
  height: calc(100vh - 16rpx);
  flex-direction: column;
  .main-imfo{
    overflow: auto;
    max-height: 100%;
    padding-bottom: 168rpx;
  }
  .info-model{
    background: #ffffff;
    margin-bottom: 16rpx;
    border-radius: 8rpx;
  }
  .fw{
    font-weight: 600;
  }
  .model-title{
    line-height: 72rpx;
    height: 72rpx;
    padding: 0 24rpx;
    border-bottom: 2rpx solid #F5F5F5;
    .model-status{
      font-weight: 600;
      color: #FF6010;
    }
  }

  .model-content{
    padding:14rpx 24rpx 16rpx;
    .info-line{
      font-weight:600 ;
      line-height: 40rpx;
      margin-bottom: 16rpx;
    }
    .info-label{
      font-weight:normal ;
    }
    .replyTime{
      float: right;
      display: inline-block;
      .info-label{
        margin-right: 10rpx;
      }
    }
  }
  .wrap-between{
    justify-content: space-between;
     display: flex;
  }

  .input-line{
    background: #F5F5F5;
    min-height: 72rpx;
    line-height: 72rpx;
    border-radius: 8rpx;
    padding: 0 24rpx;
  }
  .textarea-line{
    background: #F5F5F5;
    min-height: 126rpx;
    line-height: 40rpx;
    border-radius: 8rpx;
    padding: 16rpx 24rpx;
  }
  .info-tip{
    line-height: 44rpx;
    text-indent:2em;
  }
  .feedbackType{
    .type-item{
      height: 54rpx;
      line-height: 54rpx;
      padding: 8rpx 78rpx;
      text-align: center;
      border-radius: 8rpx;
      border: 1rpx solid #D3D3D3;
      background: #FFF;
    }
    .type-item+.type-item{
      margin-left: 22rpx;
    }
    .type-item.activity{
      border-color:#FF6010 ;
      color: #FF6010;
       font-weight: 600;
    }
  }
  .questionType{
    padding-bottom: 0;
    .question-item{
      padding: 10rpx 16rpx;
      align-items: center;
      gap: 20rpx;
      border-radius: 8rpx;
      background: #F5F5F5;
      margin-right: 24rpx;
      margin-bottom: 16rpx;
      display: inline-block;
    }
    .question-item:last-of-type{
      margin-right: 0;
    }
    .question-item.activity{
      background:#FF6010 ;
      color: #ffffff;
    }
  }
  .wordsDetail{
    textarea {
      background: #F9F9F9 !important;
      border: none !important;
      outline: none;
      height: 196rpx;
      width: 100%;
      padding: 24rpx 24rpx 48rpx;
      box-sizing: border-box;
      overflow: auto;
      font-size: 28rpx;
      outline: none;
      border: none;
    }
    text{
      float: right;
      margin-top: -50rpx;
      z-index: 1;
      position: relative;
      padding: 0 24rpx;
      color: #999999;
    }
    ::v-deep.place {
      color: #999999 !important;
      font-size:$uni-font-size-base;
      font-weight: 400;
    }
  }
  .cell-pic-input{
      height: 160rpx;
      // text-align: center;
      position: relative;
      border-radius: $uni-border-radius-default;
      box-sizing: border-box;
      ::v-deep .cell-img-add{
        width: 160rpx;
        height: 160rpx;
        image{
          width: 158rpx;
          height: 158rpx;
        }
      }
      .cell-img{
        width: 160rpx;
        height: 160rpx;
        margin: 0 auto;
        border-radius: $uni-border-radius-default;
        margin: 0 8px 8px 0;
        border: 1rpx solid #E2E2E2;
      }
  }
  .userInfo{

    .input-line+.input-line{
      margin-top: 16rpx;
    }
    input{
      height: 72rpx;
      line-height: 72rpx;
      background: #f5f5f5;
      padding: 0;
      width: 100%;
      display: block;
      font-size: 28rpx;
    }
    .input-line.companyName{
      min-height: unset;
      line-height: 40rpx;
      padding: 16rpx 24rpx;
    }
  }
  .btn-box{
    position: absolute;
    width: 100%;
    padding: 12rpx 0 68rpx;
    background: #ffffff;
    left: 0;
    bottom: 0;
    z-index: 100;
    .confirm-btn{
      width: 624rpx;
      height: 80rpx;
      margin: 0  auto;
      line-height: 80rpx;
      color: $uni-bg-color;
      background: #FF6010;
      font-size: $uni-font-size-base;
      border: 0;
      border-radius:8rpx ;
    }
  }
}
.page-wrap {
    display: flex;
}

</style>
